<template>
    <el-card>
        <template #header>
            <h2>xxx列表数据</h2>
        </template>
        <el-form inline>
            <el-form-item label="用户名">
                <el-input v-model="username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="telephone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="gender" placeholder="请选择性别">
                    <el-option label="男" value="1" />
                    <el-option label="女" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-button type="primary">搜索</el-button>
                <el-button type="default" @click="openAddUser">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" stripe border>
            <el-table-column type="index" width="80" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="telephone" label="手机号" />
            <el-table-column prop="gender" label="性别" :formatter="genderFormat"/>
            <el-table-column prop="birth" label="生日" />
            <el-table-column prop="addr" label="地址" />
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="success" size="small" @click="editUser(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
    </el-card>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="500">
        <el-form :model="userInfo">
        <el-form-item label="用户名" label-width="80">
            <el-input v-model="userInfo.username" />
        </el-form-item>
        <el-form-item label="性别" label-width="80">
            <el-select v-model="userInfo.gender" placeholder="请选择性别" style="width:100%">
                <el-option label="男" value="1" />
                <el-option label="女" value="0" />
            </el-select>
        </el-form-item>
        <el-form-item label="手机号" label-width="80">
            <el-input v-model="userInfo.telephone" />
        </el-form-item>
        <el-form-item label="生日" label-width="80">
            <el-date-picker
                v-model="userInfo.birth"
                type="date"
                placeholder="请选择生日"
                style="width:100%"
            />
        </el-form-item>
        <el-form-item label="地址" label-width="80">
            <el-input v-model="userInfo.addr" />
        </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
            确定
            </el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {reactive, ref} from 'vue'
let username = ref('')
let telephone = ref('')
let gender = ref('')
let tableData = reactive([
    { id: 1, username: "张三", telephone: "10086", gender: 1, birth: "2000-01-01", addr: "北京" },
    { id: 2, username: "李四", telephone: "10087", gender: 0, birth: "2001-01-01", addr: "上海" },
    { id: 3, username: "王五", telephone: "10088", gender: 1, birth: "2002-01-01", addr: "深圳" },
    { id: 4, username: "赵六", telephone: "10089", gender: 0, birth: "2003-01-01", addr: "石家庄" },
    { id: 5, username: "田七", telephone: "10090", gender: 1, birth: "2004-01-01", addr: "秦皇岛" },
    { id: 6, username: "周八", telephone: "10091", gender: 0, birth: "2005-01-01", addr: "天津" },
])

const genderFormat = (row, column, cellValue, index) => { 
    return cellValue == 0   ? '女' : '男'
}

// 分页相关参数
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)

const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
}
const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
}

// 弹窗控制
let dialogFormVisible = ref(false)
let title = ref('添加用户')
let userInfo = reactive({
    username: '',
    gender: '',
    telephone: '',
    birth: '',
    addr: ''
})
// 点击添加按钮
const openAddUser = () => {
    title.value = '添加用户'
    dialogFormVisible.value = true
    userInfo.id = ''
    userInfo.username = ''
    userInfo.gender = ''
    userInfo.telephone = ''
    userInfo.birth = ''
    userInfo.addr = ''
}
// 点击编辑按钮
const editUser = (row) => {
    title.value = '编辑用户'
    dialogFormVisible.value = true
    userInfo.id = row.id
    userInfo.username = row.username
    userInfo.gender = row.gender
    userInfo.telephone = row.telephone
    userInfo.birth = row.birth
    userInfo.addr = row.addr
}
</script>

<style scoped>
.el-select{
    width: 160px;
}
.el-pagination{
    margin-top: 20px;
}
</style>